<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user';
import { useMessage } from 'naive-ui';
import { getCodeInfo, login } from '@/services/userService/lcdpLogin';
import { PersonOutline, LockClosedOutline, CodeSlash } from '@vicons/ionicons5';
import type { FormInst } from 'naive-ui';
const userStore = useUserStore();
const message = useMessage();
const router = useRouter();

const sessionId = ref('');
const imageBase64 = ref('');
const formRef = ref<FormInst>();
const loading = ref(false);

const formState = reactive({
  userName: 'zhangsan',
  passwd: '123456',
  code: '',
});

// 获取验证码
const fetchCode = async () => {
  sessionId.value = (+new Date()).toString();
  const res = await getCodeInfo(sessionId.value);
  imageBase64.value = res.image;
};

onMounted(() => {
  fetchCode();
});

const rules = {
  userName: { required: true, message: '请输入用户名' },
  passwd: { required: true, message: '请输入密码' },
  code: { required: true, message: '请输入验证码' },
};

const handleSubmit = async () => {
  await formRef.value?.validate();
  try {
    loading.value = true;
    const loginInfo = await login({
      hasManager: false,
      hasInside: true,
      sessionId: sessionId.value,
      ...formState,
    });
    loading.value = false;
    userStore.setLoginInfo(loginInfo);
    const tenantList = loginInfo.tenantList ?? [];
    const tenantId = tenantList[0]?.tenantId ?? '';
    userStore.getUserInfo(() => {
      message.success('登录成功，即将进入系统');
      router.push('/base/system/role');
    }, tenantId);
  } catch (error) {
    loading.value = false;
    fetchCode();
  }
};
</script>

<template>
  <div class="view-account">
    <div class="view-account-header"></div>
    <div class="view-account-container">
      <div class="view-account-top">
        <div class="view-account-top-desc">
          Naive Ui Pro中台前端/设计解决方案
        </div>
      </div>

      <div class="view-account-form">
        <n-form ref="formRef" label-placement="left" size="large" :model="formState" :rules="rules">
          <n-form-item path="userName">
            <n-input v-model:value="formState.userName" placeholder="请输入用户名">
              <template #prefix>
                <n-icon size="18" color="#808695">
                  <PersonOutline />
                </n-icon>
              </template>
            </n-input>
          </n-form-item>
          <n-form-item path="passwd">
            <n-input
              v-model:value="formState.passwd"
              type="password"
              showPasswordOn="click"
              placeholder="请输入密码"
            >
              <template #prefix>
                <n-icon size="18" color="#808695">
                  <LockClosedOutline />
                </n-icon>
              </template>
            </n-input>
          </n-form-item>
          <n-form-item path="code">
            <n-input v-model:value="formState.code" placeholder="请输入密码">
              <template #prefix>
                <n-icon size="18" color="#808695">
                  <CodeSlash />
                </n-icon>
              </template>
              <template #suffix>
                <n-image
                  width="60"
                  object-fit="contain"
                  @click="fetchCode"
                  style="cursor: pointer"
                  preview-disabled
                  :src="`data:image/jpg;base64,${imageBase64}`"
                />
              </template>
            </n-input>
          </n-form-item>
          <n-form-item>
            <n-button type="primary" @click="handleSubmit" size="large" :loading="loading" block>登录</n-button>
          </n-form-item>
        </n-form>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.view-account {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;

  &-container {
    flex: 1;
    padding: 32px 0;
    width: 384px;
    margin: 0 auto;
  }

  &-top {
    padding: 140px 0 30px;
    text-align: center;

    &-desc {
      font-size: 14px;
      color: #808695;
    }
  }

  &-other {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .view-account {
    background-image: url("../../assets/icons/login.svg");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;
  }

  .page-account-container {
    padding: 32px 0 24px 0;
  }
}
</style>
